<style scoped lang="scss">
.app-container.home {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0;

}

.statistic-row {
  padding: 5px 0 5px 30px;

  .label {}

  .value {
    color: rgba(255, 255, 255, .8);
  }
}

.bigData-card-panel {
  height: 100%; margin-top: 5px;
  .header {
    background: rgba(0, 0, 0, .5);
    color: rgba(255, 255, 255, .8);
    height: 28px;
    line-height: 28px;
    border-radius: 6px;
    font-size: 14px;

    .el-col {
      text-align: center;
    }
  }

  .body {
    width: 100%;
    height: 100%;

    .el-row{
      margin: 2px 0;
      .el-col{
        font-size: 12px;
        text-align: center; color: rgba(255, 255, 255, 0.9);
      }
    }
  }
}
</style>
<template>
  <div class="app-container home">

    <!-- 地图作为背景图 -->
    <AMapBg :markerType="'index'">

      <template slot="mapRightCenterContainer">

        <!-- 体温检测次数汇总 -->
        <BigDataCard :width="'340px'" :height="'auto'" 
          :mainTitle="'体温检测次数汇总'">
          <template slot="rectangleContent">
            
            <el-row style="display: flex; margin-bottom: 10px;">
              <BigDataCircle :type="'primary'" :width="'115px'" :value="8090" :label="'今日检测'" />

              <div style="height: 125px; width: calc(100% - 115px); flex: 1; 
                text-align: center; color: rgba(255, 255, 255, .8);
                display: flex;
                flex-flow: column;
                justify-content: center;
                align-items: center;">
                <el-row>{{ currentTime.year }}年{{ currentTime.monthFormat }}月{{ currentTime.dayFormat }}日</el-row>
                <el-row style="letter-spacing: 20px;">
                  星期{{ currentTime.week }} 
                  <!-- 很经典的计算星期几的方法 -->
                  <!-- {{'星期' + '日一二三四五六'.charAt(new Date().getDay())}} -->
                </el-row>
              </div>
            </el-row>

            <el-row class="statistic-row">
              <el-col style="color: rgba(43, 241, 236, 1);" class="label" :span="10">累计检测体温：</el-col>
              <el-col class="value" :span="10">8,078,988 次</el-col>
            </el-row>
            <el-row class="statistic-row" style="margin-bottom: 10px;">
              <el-col style="color: rgba(252, 94, 61, 1);" class="label" :span="10">累计异常体温：</el-col>
              <el-col class="value" :span="10">76次</el-col>
            </el-row>

          </template>
        </BigDataCard>

      </template>

    </AMapBg>

    <!-- 左侧菜单栏 -->
    <BigDataLeftMenu :menuId="'index'" />

    <BigDataCard :width="'300px'" :height="'15.4rem'" style="position: absolute; left: 90px; top: 45px;"
      :mainTitle="'数据统计'">

      <template slot="rectangleContent">
        <el-row style="display: flex; margin-bottom: 10px;">
          <BigDataCircle :type="'primary'" :width="'88px'" :value="8990" :label="'学生总数'" />
          <BigDataCircle :type="'danger'" :width="'88px'" :value="3" :label="'体温异常'" />
        </el-row>

        <el-row class="statistic-row">
          <el-col style="color: rgba(43, 241, 236, 1);" class="label" :span="8">学校数：</el-col>
          <el-col class="value" :span="10">201</el-col>
        </el-row>
        <el-row class="statistic-row">
          <el-col style="color: rgba(255, 255, 255, .8);" class="label" :span="8">教职工：</el-col>
          <el-col class="value" :span="10">3387人</el-col>
        </el-row>
        <el-row class="statistic-row">
          <el-col style="color: rgba(252, 94, 61, 1);" class="label" :span="8">监护人：</el-col>
          <el-col class="value" :span="10">3876人</el-col>
        </el-row>
      </template>

    </BigDataCard>

    <!-- 健康码/出行码统计 -->
    <BigDataCard :width="'300px'" :height="'auto'" style="position: absolute; left: 90px; top: 300px; bottom: 5px;"
      :mainTitle="'健康/出行码统计'">

      <template slot="rectangleContent">

        <NightingaleChart :width="'100%'" :height="'250px'" />

        <el-row class="bigData-card-panel">
          <div class="header">
            <el-col :span="6">姓名</el-col>
            <el-col :span="9">异常类型</el-col>
            <el-col :span="9">日期</el-col>
          </div>
          <div class="body">
            <template v-for="(item, index) of codesAbnormalList">
              <el-row :key="index">
                <el-col :span="6">{{item.name}}</el-col>
                <el-col :span="9">{{item.type}}</el-col>
                <el-col :span="9">{{parseTime(item.datetime, '{y}-{m}-{d}')}}</el-col>
              </el-row>
            </template>
          </div>
        </el-row>
      </template>
    </BigDataCard>

    <!-- 体温安全指数 -->
    <SafetyIndex></SafetyIndex>

  </div>
</template>

<script>

import AMapBg from "@/views/bigData/components/AMapBg-1.vue";
import BigDataLeftMenu from "@/views/bigData/components/LeftMenu-1.vue";
import SafetyIndex from "@/views/bigData/components/common/SafetyIndex.vue";


import BigDataCard from "@/views/bigData/components/Card-1.vue";
import BigDataCircle from "@/views/bigData/components/Circle-1.vue";
import NightingaleChart from "@/views/dashboard/diy/NightingaleChart.vue";

export default {
  name: "BigDataIndex",
  components: {
    AMapBg, SafetyIndex,
    BigDataLeftMenu,
    BigDataCard, BigDataCircle, NightingaleChart,
  },
  data() {
    return {
      currentTime: this.$yhFunc.getCurrentTime(new Date()),
      codesAbnormalList: [
        { name: '张三丰', type: '二码异常', datetime: '2021-12-12 08:00:00' },
        { name: '李四', type: '健康码异常', datetime: '2021-12-11 08:00:00' },
        { name: '王五', type: '出行码异常', datetime: '2021-12-10 08:00:00' },
      ],

    };
  },
  created() {

    // console.log('当前日期', this.$yhFunc.getCurrentTime(new Date()));


  },
  methods: {


  },
};
</script>



